<template>
  <el-dialog
    title="编辑日报"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="handleColse"
    width="40%"
  >
    <el-form :model="dataForm"
             :rules="dataForm"
             ref="dataForm"
             size="small"
             label-width="80px">
      <el-form-item label="日报内容" prop="content">
<!--        <el-input v-model="dataForm.content" type="textarea"></el-input>-->
        <quill-editor :content="dataForm.content" :isShowToolbar="isShowToolbar" @onEditorChange="onEditorChange"></quill-editor>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="dialogVisible = false"
        size="small">取消</el-button>

      <el-button
        type="primary"
        :loading="dialogLoading"
        @click="handleSubmitForm"
        size="small">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {getDaily, editDaily} from '@/api/dailyweekly/workflow'
  import QuillEditor from '@/components/QuillEditor'
  export default {
    data() {
      return {
        dialogVisible: false,
        dialogLoading: false,
        dataForm: {
          dailyId: '',
          contentXml: ''
        },
        isShowToolbar: false
      }
    },
    components: {
      QuillEditor
    },
    methods: {
      initConfig (val) {
        this.dataForm.dailyId = val
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.queryDaily()
        })
      },
      async editDaily () {
        const parms = {
          id: this.dataForm.id,
          contentXml: this.dataForm.content
        }
        const data = await editDaily(parms)
        if (data) {
          if (data.code === 200) {
            this.dialogLoading = false
            this.dialogVisible = false
            this.$emit('refreshDataList')
          } else {
            this.dialogLoading = false
          }
        }
      },
      async queryDaily () {
        const data = await getDaily(this.dataForm.dailyId)
        if (data.code === 200) {
          this.dataForm = data.data
          this.dataForm.content = data.data.contentXml
        }
        this.dialogLoading = false
      },
      handleSubmitForm () {
        this.dialogLoading = true
        this.editDaily()
      },
      onEditorChange (val) {
        this.dataForm.content = val.html
      },
      handleColse () {
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped>
</style>
